<!DOCTYPE html>
<html lang="en">
<head>
<title>About us</title>
<meta charset="utf-8">
<link rel="icon" href="img/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
<meta name="description" content="Your description">
<meta name="keywords" content="Your keywords">
<meta name="author" content="Your name">
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/responsive.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/superfish.js"></script>
<script type="text/javascript" src="js/jquery.mobilemenu.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.ui.totop.js"></script>

<!--[if lt IE 8]>
  		<div style='text-align:center'><a href="http://www.microsoft.com/windows/internet-explorer/default.aspx?ocid=ie6_countdown_bannercode"><img src="http://www.theie6countdown.com/img/upgrade.jpg"border="0"alt=""/></a></div>  
 	<![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->

<!--<![endif]-->
<!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>  
    <link rel="stylesheet" href="css/ie.css" type="text/css" media="screen">
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700' rel='stylesheet' type='text/css'>
  <![endif]-->
</head>

<body>
<!--============================== header =================================-->
<header>
  <div class="container">
    <div class="navbar navbar_ clearfix">
      <ul class="list-soc">
        <li><a href="#"><img alt="" src="img/soc-icon1.png"></a></li>
        <li><a href="#"><img alt="" src="img/soc-icon2.png"></a></li>
        <li><a href="#"><img alt="" src="img/soc-icon3.png"></a></li>
      </ul>
      <div class="nav-collapse nav-collapse_  collapse">
        <ul class="nav sf-menu">
          <li><a href="index.php">Home</a></li>
          <li class="active"><a href="index-1.html">About us</a></li>
          <li><a href="index-2.html">Programs</a>
            <ul>
              <li><a href="#">Basic</a></li>
              <li><a href="#">Advanced</a></li>
              <li><a href="#">Individual</a>
                <ul>
                  <li><a href="#">View program</a></li>
                </ul>
              </li>
            </ul>
          </li>
          <li><a href="index-3.html">Pricing</a></li>
          <li><a href="index-4.html">Contacts</a></li>
        </ul>
      </div>
    </div>
    
    <div class="row">
      <article class="span3">
        <h1 class="brand"><a href="index.php"><img alt="Dog`s life" src="img/logo.gif"></a></h1>
      </article>
      <article class="span3 "> <img src="img/header-img1.jpg " alt="" /> </article>
       <article class="span3"> <img src="img/header-img3.jpg " alt="" /> </article>
      <article class="span3"> <img src="img/header-img2.jpg " alt="" /> </article>   
      
    </div>
   
  </div>
</header>

<!--============================== content =================================-->

<div id="content">
    <div class="container">
          <div class="row">
        <article class="span4">      
         <div class="inner">   <h3><span>01/</span> our advantages</h3>
            <ul class="list-about">
               <li>
                <div class="badge_ badge">1.</div>
                <div class="overflow"> <a href="#" class="link-2">Praesent ves molestie lacus aenean.</a><br>
                Fusce suscipit variu. Cum sociis natoque penati
                bus et magnis dis parturient montes, nascetur ridiculus mus. Fusce feugiat malesuada odio. 
                </div>
              </li>
              <li>
                <div class="badge_ badge">2.</div>
                <div class="overflow"><a href="#" class="link-2">Vestibulum iaculis lacinia.</a><br>
                Fusce suscipit variu. Cum sociis natoque penati
                bus et magnis dis parturient montes, nascetur ridiculus mus. Fusce feugiat malesuada odio. 
                  </div>
              </li>
              <li>
                <div class="badge_ badge">3.</div>
                <div class="overflow"><a href="#" class="link-2">Architecto beatae vitae dicta.</a><br>
                 Fusce suscipit variu. Cum sociis natoque penati
                bus et magnis dis parturient montes, nascetur ridiculus mus. Fusce feugiat malesuada odio. 
                </div>
              </li>
           </ul>
            <h3><span>02/</span> testimonials</h3>
            <ul class="list-quote">
               <li>
                <blockquote class="quote-1">
                <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore verita quasi archi..."</p>
                <strong>Mark Johnson</strong>
                </blockquote>
              </li>
                 <li>
                <blockquote class="quote-1">
                 <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore verita quasi archi..."</p>
                 <strong>Din Haddon</strong>
                 </blockquote>
              </li>
           </ul></div>

       </article>
        <article class="span8">            
            <h3><span>03/</span> a few words about us</h3>
            <div class="txt-1">Praesent vestibulum molestie lacus. Aenean nonummy hendrerit mauris. Phasellus porta. Fusce suscipit varius mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce feugiat malesuada odio. </div>
           Morbi nunc odio, gravida at, cursus nec, luctus a, lorem. Maecenas tristique orci ac sem. Duis ultricies pharetra magna. Donec accumsan malesuada orci. Donec sit amet eros. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris fermentum dictum magna. Sed laoreet aliquam leo. Ut tellus dolor, dapibus eget, elementum vel, cursus eleifend, elit. Aenean auctor wisi et urna. Aliquam erat volutpat. Duis ac turpis. Integer rutrum ante eu lacus. Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque. Vivamus eget nibh. Etiam cursus leo vel metus. Nulla facilisi. Aenean nec eros. Vestibu
lum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae. Suspendisse sollicitudin velit sed leo.
            
            <h3><span>04/</span> our staff</h3>
            <ul class="thumbnails list-team clearfix">
                <li>
                <div class="thumbnail thumbnail-1">
                   <figure><img  src="img/page2-img1.jpg" alt=""></figure>
                   <section class="maxheight1">
                    <a href="#" class="link-2">Bradley Grosh</a>
                     <p>Morbi nunc odio gravida at cursus nec, luctusa <a href="#" class="link-2">[...]</a></p>
                  </section>
                </div>
              </li>
              <li>
                <div class="thumbnail thumbnail-1">
                   <figure><img  src="img/page2-img2.jpg" alt=""></figure>
                   <section class="maxheight1">
                     <a href="#" class="link-2">Patrick Pool</a>
                    <p>Morbi nunc odio gravida at cursus nec, luctusa <a href="#" class="link-2">[...]</a></p>
                  </section>
                </div>
              </li>
              <li>
                <div class="thumbnail thumbnail-1">
                      <figure><img  src="img/page2-img3.jpg" alt=""></figure>
                      <section class="maxheight1">
                     <a href="#" class="link-2">Jessica Priston</a>
                     <p>Morbi nunc odio gravida at cursus nec, luctusa <a href="#" class="link-2">[...]</a></p>
                  </section>
                 </div>
              </li>
              <li>
                <div class="thumbnail thumbnail-1">
                      <figure><img  src="img/page2-img4.jpg" alt=""></figure>
                      <section class="maxheight1">
                    <a href="#" class="link-2">Olivia Kromstain</a>
                     <p>Morbi nunc odio gravida at cursus nec, luctusa <a href="#" class="link-2">[...]</a></p>
                  </section>
                </div>
              </li>
              <li>
                <div class="thumbnail thumbnail-1">
                      <figure><img  src="img/page2-img5.jpg" alt=""></figure>
                      <section class="maxheight1">
                    <a href="#" class="link-2">Anton Stegner</a>
                     <p>Morbi nunc odio gravida at cursus nec, luctusa <a href="#" class="link-2">[...]</a></p>
                  </section>
                </div>
              </li>
              
                <li>
                <div class="thumbnail thumbnail-1">
                      <figure><img  src="img/page2-img6.jpg" alt=""></figure>
                      <section class="maxheight1">
                    <a href="#" class="link-2">Brenda Franklin</a>
                     <p>Morbi nunc odio gravida at cursus nec, luctusa <a href="#" class="link-2">[...]</a></p>
                  </section>
                </div>
              </li>
              
                      <li>
                <div class="thumbnail thumbnail-1">
                      <figure><img  src="img/page2-img7.jpg" alt=""></figure>
                      <section class="maxheight1">
                    <a href="#" class="link-2">Monica Smith</a>
                     <p>Morbi nunc odio gravida at cursus nec, luctusa <a href="#" class="link-2">[...]</a></p>
                  </section>
                </div>
              </li>
          </ul>
     
       </article>
      </div>
        </div>
  </div>

<!--============================== footer =================================-->
<div class="container">
  <footer>
    <div class="row">
      <article class="span2 pull-right">
        <ul class="list">
          <li><a href="#">Deafness in dogs</a></li>
          <li><a href="#">Travelling with your dog</a></li>
          <li><a href="#">Poodle cross  breeds</a></li>
        </ul>
      </article>
      <article class="span2 pull-right">
        <ul class="list">
          <li><a href="#">Life in the old dog</a></li>
          <li><a href="#">Clicker training</a></li>
          <li><a href="#">Labradoodles</a></li>
        </ul>
      </article>
      <article class="span2 pull-right">
        <ul class="list">
          <li><a href="#">Choosing a puppy</a></li>
          <li><a href="#">Introducing dogs </a></li>
          <li><a href="#">Choosing a rescue dog</a></li>
        </ul>
      </article>
      <article class="span3 pull-right">
        <div class="box-phone"> <strong>Аggression?</strong> <span>call free:<em> 1 800 125 1258</em></span>
          <p>An all-in-one dog training  resource 
            for owning, fixing your dog`s 
            behavior problem</p>
        </div>
      </article>
      <article class="span3"> <img src="img/logo-footer.gif" alt="" class="logo-footer"/>
        <div class="privacy">&copy; 2013 | <a href="index-5.html">Privacy policy</a>
        </div>
      </article>
    </div>
  </footer>
</div>
<script type="text/javascript" src="js/bootstrap.js"></script>
</body>
</html>